﻿@model EC18_ESHOP.Models.UserProfile

@{
    ViewBag.Title = "Profile";
    Layout = "~/Areas/Admin/Views/Shared/_Admin.cshtml";
}
<div class="page-header position-relative">
    <h1>Hồ sơ người dùng</h1>
</div>
@if (ViewBag.Notify == 3)
{
    <div class="alert alert-error">
        <button type="button" class="close" data-dismiss="alert">
            <i class="icon-remove"></i>
        </button>
        <strong><i class="icon-remove"></i>Lỗi!</strong> Không thể cập nhật.<br />
    </div>
}
else if (ViewBag.Notify == 2)
{
    <div class="alert alert-warning">
        <button type="button" class="close" data-dismiss="alert">
            <i class="icon-remove"></i>
        </button>
        <strong>Cảnh báo!</strong> Không thể cập nhật password<br />
    </div>
}
else if (ViewBag.Notify == 1)
{
    <div class="alert alert-block alert-success">
        <button type="button" class="close" data-dismiss="alert">
            <i class="icon-remove"></i>
        </button>
        <p>
            <strong><i class="icon-ok"></i>Thành công!</strong> Dữ liệu của bạn đã được cập nhật.
        </p>
    </div>
}


<div id="user-profile-3" class="user-profile row-fluid">
    <div class="offset1 span10">


        <div class="space"></div>

        @using (Html.BeginRouteForm("Admin_default", new { controller = "AdminHome", action = "UpdateProfile" }, FormMethod.Post, new { @class = "form-horizontal", @id = "updateform", @name = "updateform", enctype = "multipart/form-data" }))
        {
            @Html.AntiForgeryToken()
            @Html.ValidationSummary(true)
            <div class="tabbable">
                <ul class="nav nav-tabs padding-16">
                    <li class="active">
                        <a data-toggle="tab" href="#edit-basic">
                            <i class="green icon-edit bigger-125"></i>
                            Thông tin cơ bản
                        </a>
                    </li>

                    <li>
                        <a data-toggle="tab" href="#edit-password">
                            <i class="blue icon-key bigger-125"></i>
                            Password
                        </a>
                    </li>
                </ul>

                <div class="tab-content profile-edit-tab-content">
                    <div id="edit-basic" class="tab-pane in active">
                        <h4 class="header blue bolder smaller">Thông tin chung</h4>

                        <div class="row-fluid">
                            <div class="span4">
                                <input type="file" name="inputavatar" />
                            </div>

                            <div class="vspace"></div>

                            <div class="span8">
                                <div class="control-group">
                                    <label class="control-label" for="form-field-username">Username</label>

                                    <div class="controls">
                                        @Html.TextBoxFor(model => model.UserName, new { @id = "form-field-username", @readonly = "readonly" })
                                        @*<input type="text" id="form-field-username" value="@Model.UserName" />*@
                                    </div>
                                </div>
                            </div>
                        </div>

                        <hr />
                        <div class="control-group">
                            <label class="control-label" for="DOB">Ngày sinh</label>

                            <div class="controls">
                                <div class="input-append">
                                    <input class="input-small date-picker" id="DOB" type="text" data-date-format="dd-mm-yyyy" placeholder="dd-mm-yyyy" value="@Model.DOB.Value.ToString("dd-MM-yyyy")" name="DOB"/>
                                    <span class="add-on">
                                        <i class="icon-calendar"></i>
                                    </span>
                                </div>
                            </div>
                        </div>

                        <div class="control-group">
                            <label class="control-label">Giới tính</label>

                            <div class="controls">
                                <div class="space-2"></div>

                                <label class="inline">
                                    @Html.RadioButtonFor(model => model.Sex, !Model.Sex)
                                    @*<input name="form-field-radio" type="radio" />*@
                                    <span class="lbl">Nam</span>
                                </label>

                                &nbsp; &nbsp; &nbsp;
																<label class="inline">
                                                                    @Html.RadioButtonFor(model => model.Sex, Model.Sex)
                                                                    @*<input name="form-field-radio" type="radio" />*@
                                                                    <span class="lbl">Nữ</span>
                                                                </label>
                            </div>
                        </div>

                        <div class="space"></div>
                        <h4 class="header blue bolder smaller">Thông tin liên lạc</h4>

                        <div class="control-group">
                            <label class="control-label" for="emailfield">Email</label>

                            <div class="controls">
                                <span class="input-icon input-icon-right">
                                    @Html.TextBoxFor(model => model.Email, new { @id = "Email" })
                                    @*<input type="email" id="form-field-email" value="alexdoe@gmail.com" />*@
                                    <i class="icon-envelope"></i>
                                </span>
                            </div>
                        </div>

                        <div class="control-group">
                            <label class="control-label" for="phonefield">Số điện thoại</label>

                            <div class="controls">
                                <span class="input-icon input-icon-right">
                                    @Html.TextBoxFor(model => model.Numberphone, new { @id = "Numberphone" })
                                    @*<input type="text" id="form-field-phone"/>*@
                                    <i class="icon-phone icon-flip-horizontal"></i>
                                </span>
                            </div>
                        </div>
                    </div>

                    <div id="edit-password" class="tab-pane">
                        <div class="space-10"></div>

                        <div class="control-group">
                            <label class="control-label" for="currentpass">Current Password</label>

                            <div class="controls">
                                <input type="password" id="currentpass" name="currentpass" />
                            </div>
                        </div>

                        <div class="control-group">
                            <label class="control-label" for="newpass">New Password</label>

                            <div class="controls">
                                <input type="password" id="newpass" name="newpass" />
                            </div>
                        </div>

                        <div class="control-group">
                            <label class="control-label" for="confirmpass">Confirm Password</label>

                            <div class="controls">
                                <input type="password" id="confirmpass" name="confirmpass" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-actions">
                <button class="btn btn-info" type="submit">
                    <i class="icon-ok bigger-110"></i>
                    Lưu
                </button>
                &nbsp; &nbsp; &nbsp;
            <button class="btn" type="reset"><i class="icon-undo bigger-110"></i>Làm lại</button>
            </div>
        }

    </div>
    <!--/span-->
</div>
@section scripts{
    <script src="~/Content/assets/js/x-editable/bootstrap-editable.js"></script>
    @Scripts.Render("~/bundles/jqueryval")
    <script type="text/javascript">
        $(function () {

            $('#user-profile-3')
            .find('input[type=file]').ace_file_input({
                style: 'well',
                btn_choose: 'Change avatar',
                btn_change: null,
                no_icon: 'icon-picture',
                thumbnail: 'large',
                droppable: true,
                before_change: function (files, dropped) {
                    var file = files[0];
                    if (typeof file === "string") {//files is just a file name here (in browsers that don't support FileReader API)
                        if (!(/\.(jpe?g|png|gif)$/i).test(file)) return false;
                    }
                    else {//file is a File object
                        var type = $.trim(file.type);
                        if ((type.length > 0 && !(/^image\/(jpe?g|png|gif)$/i).test(type))
                                || (type.length == 0 && !(/\.(jpe?g|png|gif)$/i).test(file.name))//for android default browser!
                            ) return false;

                        if (file.size > 110000) {//~100Kb
                            return false;
                        }
                    }

                    return true;
                }
            })
            .end().find('button[type=reset]').on(ace.click_event, function () {
                $('#user-profile-3 input[type=file]').ace_file_input('reset_input');
            })
            .end().find('.date-picker').datepicker().next().on(ace.click_event, function () {
                $(this).prev().focus();
            })



            ////////////////////
            //change profile
            $('[data-toggle="buttons-radio"]').on('click', function (e) {
                var target = $(e.target);
                var which = parseInt($.trim(target.text()));
                $('.user-profile').parent().hide();
                $('#user-profile-' + which).parent().show();
            });
        });

        $("#updateform").validate({
            rules: {
                DOB: {
                    required: true
                },
                Email: {
                    required: true,
                    email: true
                },
                Numberphone: {
                    required: true,
                    maxlength: 15
                },
                confirmpass: {
                    equalTo: "#newpass"
                }
            },
            messages: {
                DOB: {
                    required: "Xin chọn ngày sinh"
                },
                Email: {
                    required: "Xin nhập email",
                    email: "Xin nhập email"
                },
                Numberphone: {
                    required: "Xin nhập số điện thoại",
                    maxlength: "Xin nhập không quá 15 số"
                },
                confirmpass: {
                    equalTo: "Xác nhận password không trùng khớp"
                }
            }
        });

    </script>
}